import React, { useState, useEffect } from 'react'
import { Form, Input, Button, DatePicker, Col, Row, Breadcrumb } from 'antd';
import { Table,Modal } from 'antd';
import axios from 'axios';
import { useForm } from 'antd/lib/form/Form';
export default function Table1() {
    const [dataBase, setDataBase] = useState([])
    const [total, setTotal] = useState("0")
    const paginationProps = {
        // onChange: (page) => {
        //     getData(page)
        // },
        pageSize: 10,
        total: total,
        showQuickJumper: true,
        showTotal: (total, range) => `共${total}条数据`,
        position: ["bottomCenter"]
    }
    //行内数据
    const columns = [
        {
            title: "检查项目",
            dataIndex: "mingCheng",
            key: "mingCheng",
            align: 'center',
        },
        {
            title: "检查次数",
            dataIndex: "jianChaCiShu",
            key: "jianChaCiShu",
            align: 'center',
        },
         {
            title: "单次价格",
            dataIndex: "danCiJiaGe",
            key: "danCiJiaGe",
            align: 'center',
        },
        {
            title: "总金额",
            dataIndex: "zongJinE",
            key: "zongJinE",
            align: 'center',
        },
        {
            title: "类型",
            dataIndex: "leiXing",
            key: "leiXing",
            align: 'center',
        },
        {
            title: "日期",
            dataIndex: "riQi",
            key: "riQi",
            align: 'center',
        },
        {
            title: "操作",
            dataIndex: 'operation',
            key: 'operation',
            ellipsis: true,
            align: 'center',
            width: "300px",
            render: (text, row) => {
                return (
                    <>
                        <Button onClick={() => { chaKan(row) }} style={{ backgroundColor: "rgb(133,206,97)", color: "white", marginRight: "20px" }}>查看</Button>
                    </>
                )
            }
        }
    ]
    const [isModalVisible1, setIsModalVisible1] = useState(false);
    const handleCancel = () => {
        setIsModalVisible1(false);
    };
    //打印按钮
    const [form]=useForm()
    const chaKan = (row) => {
        setIsModalVisible1(true);

        console.log(row);
        form.setFieldsValue(row)
    }
    const getData=()=>{
        axios("/jianChaXiangMuDingJia/tongJi", {
            method: "post",
            headers: { "Content-Type": "application/json" },
            
        })
        .then(res=>{
            console.log(res);
            let data=res.data.data
            if(res.data.code===200){
                for(let i=0;i<data.length;i++){
                    data[i].key=i+1
                }
                setTotal(res.data.count)
                setDataBase(data)
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
    useEffect(()=>{
        getData()
    },[])
    const chaXun=(value)=>{
        console.log(value);
        let temp={}
        temp.mingCheng=value.jianChaXiangMu
        if(value.riQi===undefined){
            temp.riQi=undefined
       }else{
        temp.riQi=value.riQi.format('YYYY-MM-DD')
       }
        axios("/jianChaXiangMuDingJia/tongJi", {
            method: "post",
            headers: { "Content-Type": "application/json" },
            params:temp
        })
        .then(res=>{
            console.log(res);
            let data=res.data.data
            if(res.data.code===200){
                for(let i=0;i<data.length;i++){
                    data[i].key=i+1
                }
                setTotal(res.data.count)
                console.log(data);
                setDataBase(data)
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
    const riQi=()=>{}
    return (
        <div>
            {/* table表格 */}
            <Breadcrumb style={{ marginBottom: 24 }}>
                <Breadcrumb.Item>计价收费</Breadcrumb.Item>
                <Breadcrumb.Item>检查项目统计表</Breadcrumb.Item>
            </Breadcrumb>
            <Col span={24} className="contentBody-col">
                <Form layout='inline' onFinish={chaXun}>
                    <Form.Item
                        label="检查项目"
                        name="jianChaXiangMu"
                    >
                        <Input placeholder="请输入检查项目" />
                    </Form.Item >
                    <Form.Item label="日期" name="riQi">
                        <DatePicker onChange={riQi} placeholder="请选择日期" />
                    </Form.Item>
                    <Form.Item>
                        <Button htmlType="submit"  style={{ backgroundColor: "rgb(133,206,97)", color: "white", marginRight: "20px" }}>查询</Button>
                    </Form.Item>
                </Form>
            </Col>
            <Col span={24} className="contentBody-col">
                <Table pagination={paginationProps} collapsible="true" dataSource={dataBase} columns={columns} childrenColumnName></Table>
            </Col>
            <Modal okText  cancelText="关闭" title="计价收费修改"   visible={isModalVisible1} onCancel={handleCancel}  >
                <Form   layout="vertical" form={form}>
                    <Form.Item
                        label="检查项目"
                        name="mingCheng"
                    >
                        <Input readOnly />
                    </Form.Item >
                    <Form.Item label="检查次数" name="jianChaCiShu">
                        <Input readOnly  />
                    </Form.Item>
                    <Form.Item label="单次价格" name="danCiJiaGe">
                        <Input readOnly/>
                    </Form.Item>
                    <Form.Item label="总金额" name="zongJinE">
                        <Input readOnly/>
                    </Form.Item>
                    <Form.Item label="类型" name="leiXing">
                        <Input readOnly />
                    </Form.Item>
                    <Form.Item label="日期" name="riQi">
                        <Input readOnly/>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}
